<template>
  <div class="edit-container-p15">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="河流基本信息" name="basic">
        <div class="desc_cont">
          <el-form ref="riverViewForm" :model="form" :rules="rules" label-width="0px" :inline="true">
            <el-descriptions :column="3" border :labelStyle="{fontSize: '12px',fontWeight: 'bold',color: '#000'}">
              <el-descriptions-item>
                <template #label>
                  <span>河流名称</span>
                </template>
                <el-form-item prop="name">
                  <el-input v-model="form.name" placeholder="请输入河流名称" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>别名</span>
                </template>
                <el-form-item prop="alias">
                  <el-input v-model="form.alias" placeholder="请输入别名" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>河流编码</span>
                </template>
                <el-form-item prop="code">
                  <el-input v-model="form.code" placeholder="请输入河流编码" />
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <span>上级河流</span>
                </template>
                <el-form-item prop="parentId">
                  <el-tree-select v-model="form.parentId" :data="riverOptions" :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id" placeholder="上级河流" default-expand-all check-strictly />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>所属流域</span>
                </template>
                <el-form-item prop="riverBasinId">
                  <el-select v-model="form.riverBasinId" placeholder="请选择所属流域" style="width: 100%" clearable>
                    <el-option v-for="(item, index) in basinList" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>所属水系</span>
                </template>
                <el-form-item prop="riverSystemId">
                  <el-select v-model="form.riverSystemId" placeholder="请选择所属水系" style="width: 100%" clearable>
                    <el-option v-for="(item, index) in riverSystemArr" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <span>中心点经度</span>
                </template>
                <el-form-item prop="longitude">
                  <el-input v-model="form.longitude" placeholder="请输入中心点经度" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>中心点纬度</span>
                </template>
                <el-form-item prop="latitude">
                  <el-input v-model="form.latitude" placeholder="请输入中心点纬度" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>坐标拾取</span>
                </template>
                <el-button type="primary" icon="el-icon-place" @click="openPoint(1, { lng: form.longitude, lat: form.latitude })" plain>空间标点</el-button>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <span>总河流面积（km²）</span>
                </template>
                <el-form-item prop="area">
                  <el-input v-model="form.area" placeholder="请输入总河流面积" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>境内流域面积（km²）</span>
                </template>
                <el-form-item prop="areaIn">
                  <el-input v-model="form.areaIn" placeholder="请输入境内流域面积" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item />

              <el-descriptions-item>
                <template #label>
                  <span>总河长（km）</span>
                </template>
                <el-form-item prop="length">
                  <el-input v-model="form.length" placeholder="请输入总河长" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>境内河长（km）</span>
                </template>
                <el-form-item prop="lengthIn">
                  <el-input v-model="form.lengthIn" placeholder="请输入境内河长" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item />

              <el-descriptions-item>
                <template #label>
                  <span>平均比降（‰）</span>
                </template>
                <el-form-item prop="down">
                  <el-input v-model="form.down" placeholder="请输入平均比降" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>境内平均比降（‰）</span>
                </template>
                <el-form-item prop="downIn">
                  <el-input v-model="form.downIn" placeholder="请输入境内平均比降" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>总落差（m）</span>
                </template>
                <el-form-item prop="difference">
                  <el-input v-model="form.difference" placeholder="请输入总落差" />
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item label="水能蕴藏量（万kw）">
                <el-form-item prop="waterReserve">
                  <el-input v-model="form.waterReserve" placeholder="请输入水能蕴藏量" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item label="河口多年平均流量(m3/s)">
                <el-form-item prop="flow">
                  <el-input v-model="form.flow" placeholder="请输入河口多年平均流量" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item />

              <el-descriptions-item>
                <template #label>
                  <span>是否在境内</span>
                </template>
                <el-form-item prop="within">
                  <el-radio-group v-model="form.within">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template #label>
                  <span>河流枝流干流说明</span>
                </template>
                <el-form-item prop="branch">
                  <el-input v-model="form.branch" placeholder="请输入河流枝流干流说明" />
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item span="3">
                <template #label>
                  <span>简介</span>
                </template>
                <el-form-item prop="info">
                  <el-input type="textarea" v-model="form.info" placeholder="请输入简介" />
                </el-form-item>
              </el-descriptions-item>

              <el-descriptions-item label="环境容量因子" span="3" labelClassName="zx-descriptions-placeholder" contentClassName="zx-descriptions-placeholder-content"></el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <span>COD(吨/年)</span>
                </template>
                <el-form-item prop="capacityCod">
                  <el-input v-model="form.capacityCod" placeholder="请输入环境容量_COD" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>NH3N(吨/年)</span>
                </template>
                <el-form-item prop="capacityNh3n">
                  <el-input v-model="form.capacityNh3n" placeholder="请输入环境容量_NH3N" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item />
              <el-descriptions-item>
                <template #label>
                  <span>TN(吨/年)</span>
                </template>
                <el-form-item prop="capacityTn">
                  <el-input v-model="form.capacityTn" placeholder="请输入环境容量_TN" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <span>TP(吨/年)</span>
                </template>
                <el-form-item prop="capacityTp">
                  <el-input v-model="form.capacityTp" placeholder="请输入环境容量_TP" />
                </el-form-item>
              </el-descriptions-item>
              <el-descriptions-item />
            </el-descriptions>
          </el-form>
        </div>
        <div style="margin-top: 15px; text-align: center">
          <el-button :loading="buttonLoading" @click="goBack">返 回</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="流经区域" name="tawm">
        <townHtml></townHtml>
      </el-tab-pane>
      <!-- <el-tab-pane label="水质监测" name="waterQuality">
      </el-tab-pane>
      <el-tab-pane label="流域分析" name="lake">
      </el-tab-pane>
      <el-tab-pane label="污染源" name="wry">
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>


<script setup name="riverView">
import { riverBasinList, riverSystemList } from "@/api/base";
import { getRiver, listRiver } from "@/api/base/river";
import staticRouter from "@/router/static";
import townHtml from "./components/town.vue";
// import { screenNewestDate } from "@/api/water/surfaceHome.js";
import useTagsViewStore from "@/store/modules/tagsView";
let set = useTagsViewStore();
const { proxy } = getCurrentInstance();

const buttonLoading = ref(false); // 按钮loading
const activeName = ref("basic");
const loading = ref(true); // 遮罩层
const form = ref({}); // 表单参数
const rules = ref({}); // 表单校验
const riverOptions = ref([]); // 河流树选项
const basinList = ref([]); // 流域列表
const riverSystemArr = ref([]); // 水系列表
const mapDialogVisible = ref(false); // 地图拾取坐标弹窗
const latlng = ref(undefined);
const pointType = ref(undefined);
const date = ref(undefined);
const queryDate = ref(undefined);

function handleClick(e) {
  // if (e.index == 2) {
  //   proxy.$router.push({
  //     path: staticRouter.riverIndexData,
  //     query: {
  //       waterId: $route.params.id,
  //     },
  //   });
  // } else if (e.index == 3) {
  //   proxy.$router.push({
  //     path: staticRouter.waterSurfaceView,
  //     query: {
  //       id: $route.params.id,
  //       date: queryDate,
  //     },
  //   });
  // } else if (e.label == "污染源") {
  //   proxy.$router.push({
  //     path: staticRouter.riverPullutionBind,
  //     query: {
  //       id: $route.params.id,
  //     },
  //   });
  // }
}

function fungetRiver(id) {
  getRiver(id).then((res) => {
    form.value = res.data;
  });
}
// 查询流域列表
function fnGetRiverBasinList() {
  riverBasinList().then((res) => {
    basinList.value = res.data;
  });
}
// 查询水系列表
function fnGetRiverSystemList() {
  riverSystemList().then((res) => {
    riverSystemArr.value = res.data;
  });
}
/** 查询河流下拉树结构 */
function fetchTreeSelect() {
  listRiver().then((res) => {
    riverOptions.value = [];
    const data = {
      id: 0,
      name: "无上级河流",
      children: [],
    };
    data.children = proxy.handleTree(res.rows, "id", "parentId");
    riverOptions.value.push(data);
    console.log(riverOptions.value);
    // riverOptions.value = proxy.handleTree(res.rows, "id", "parentId");
  });
}
/**地图弹窗 */
function openPoint(e, latlng) {
  latlng.value = latlng;
  mapDialogVisible.value = true;
  pointType.value = e;
}
// 修改是否让页面显示与隐藏的事件
function updateVisible(val) {
  mapDialogVisible.value = val;
}
// 点击取消的事件
function resetPopupData() {
  //  这里可重置数据
  mapDialogVisible.value = false;
}
// 点击确定的按钮
function submitPopupData(e, type) {
  const { lat, lng } = e;
  switch (pointType.value) {
    case 1:
      form.value.longitude = lng;
      form.value.latitude = lat;
      break;
    default:
      form.value.longitude = lng;
      form.value.latitude = lat;
      break;
  }
  mapDialogVisible.value = false;
}
// 关闭弹框（头部的X）
function handleClose() {
  mapDialogVisible.value = false;
}
// 返回
function goBack() {
  proxy.$router.go(-1);
  // 关闭当前标签页
  set.delView(proxy.$route);
}

fetchTreeSelect();
fnGetRiverBasinList();
fnGetRiverSystemList();
const id = proxy.$route.query.id;
set.updateSelectedTagTitle({ name: "河流详情-" + id, cover: true });
if (id) {
  fungetRiver(id);
}
</script>
